<%--
  Created by bothin
  At 2019/12/21 17:26
  Description: 
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%@include file="../component/head_link_css_js.jsp"%>

    <style>
        .layui-form-item .layui-input-inline{
            width: 280px;
        }
        #chartContainer{
            width: 60%;
            margin-left: 16%;
            height: 300px;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 头部区域 -->
    <%@include file="../component/nav_header.jsp"%>
    <!-- 侧边菜单 -->
    <jsp:include page="../component/nav_side_menu.jsp">
        <jsp:param name="nav" value="6#1" />
    </jsp:include>

    <!-- 内容主体区域 -->
    <div class="layui-body" id="LAY_app_body" style="top: 50px;">
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-header layuiadmin-card-header-auto">
                    <div style="padding-bottom: 10px;">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label" style="width: 99px">查询一段时间：</label>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-block" style="margin-left: 20px;">
                                    <input type="text" name="createTime" placeholder="开始时间" class="layui-input" id="start">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-block">
                                    <input type="text" placeholder="结束时间" class="layui-input" id="end">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layuiadmin-btn-admin" id="btn_click">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body" id="chartContainer" style="padding-bottom: 50px;">
                </div>
                <div style="height: 100px;width: 1px;"></div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
<script src="${pageContext.request.contextPath}/resources/js/canvas.js"></script>
<script>
    layui.config({
        base: '${pageContext.request.contextPath}/resources/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'laydate','sample','useradmin','layer','form'], function(){

        var $ = layui.$
            ,form = layui.form
            ,laydate = layui.laydate,layer=layui.layer;

        laydate.render({
            elem: '#start' //指定元素
            ,type: 'datetime'
            ,format: 'yyyy-MM-dd HH:mm:ss'
            ,max: 0
        });
        laydate.render({
            elem: '#end' //指定元素
            ,type: 'datetime'
            ,format: 'yyyy-MM-dd HH:mm:ss'
            ,max: 0
        });

        $.ajax({
            type: 'GET',
            url: '${pageContext.request.contextPath}/statistics/company/sum',
            data: {},
            contentType: 'text/json',
            dataType: 'json',
            success: function (data) {
                statistics(data);
            }
        });

        $("#btn_click").click(function () {
            $.ajax({
                type: 'GET',
                url: '${pageContext.request.contextPath}/statistics/company/sum',
                data: {start:$("#start").val(),end:$("#end").val()},
                contentType: 'text/json',
                dataType: 'json',
                success: function (data) {
                    statistics(data);
                }
            });
        })

    });

    function statistics(dataPoints) {
        new CanvasJS.Chart('chartContainer',{
            theme:'light7',//主题
            animationEnabled: true,
            title: {
                text: "销售总额统计"
            },
            data: [
                {
                    // 数据
                    type: "column",
                    dataPoints: dataPoints
                }
            ]
        }).render();
    }


</script>



